<template>
    <div :class="{activeColor:isActive,normalColor:!isActive}">
        <Header></Header>
    </div>
    <div>
        <Body></Body>
    </div>
</template>

<script>
    import Body from "./index2s/Body"
    import Header from "./index2s/Header"
    export default {
        name: "index2",
        data(){
            return{
                isActive:false,
            }
        },
        components:{
            Header,
            Body
        },
        methods:{
            handleScroll(){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>60){
                    this.isActive = true;
                }else {
                    this.isActive = false;
                }
            },
        },
        mounted() {
            window.addEventListener("scroll",this.handleScroll,true);
        },

    }
</script>

<style scoped>
.activeColor{
    background-color: #ffffff;
    position: fixed;
    z-index: 1;
    width: 100%;
}
.normalColor{
    /*background-color:;*/
    position: fixed;
    z-index: 1;
    width: 100%;
}
</style>